<template>
  <view class="pt-10rpx">
    <view class="text-40rpx text-#1C213E text-center font-bold mb-24rpx">您已开通永久盟友合伙人</view>
    <view class="text-28rpx text-#727687 text-center mb-54rpx">保存个人邀约二维码，发展下线，获取更多收益！</view>
    <view class="px-62rpx mb-62rpx">
      <view class="card">
        <view class="text-40rpx text-#1C213E text-center font-bold mb-62rpx">邀请你加入易盟</view>
        <view class="w-386rpx h-386rpx mx-auto mb-24rpx">
          <uv-qrcode ref="qrcodeRef" size="386rpx" :value="inviteUrl" :options="options" @complete="handleComplete"></uv-qrcode>
        </view>
        <view class="text-28rpx text-#727687 text-center mb-54rpx">合伙人专属邀请码</view>
        <view class="flex items-center px-32rpx">
          <image
            class="w-78rpx h-78rpx rd-78rpx"
            :src="
              userInfo.avatarUrl ? userInfo.avatarUrl : 'https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/default_avatar.png'
            "
          ></image>
          <view class="flex-1 min-w-0 ml-24rpx text-28rpx text-#F6CB86 font-bold">来自：{{ userInfo.providerName || '默认昵称' }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script name="goldChannelInvitation" setup>
import userStore from '@/store/user';
const user = userStore();

const { userInfo } = user;

const inviteUrl = ref('');

const qrcodeRef = ref(null);
const qrcodeBase64 = ref('');

const options = ref({
  useDynamicSize: false,
  errorCorrectLevel: 'Q',
  backgroundImageHeight: '200rpx'
});

const handleComplete = (res) => {
  if (res.success) {
    getInviteCode();
  }
};

// 获取邀请二维码
const getInviteCode = () => {
  qrcodeRef.value.toTempFilePath({
    success: (res) => {
      qrcodeBase64.value = res.tempFilePath;
    }
  });
};

// 保存到相册 下载二维码方案
const handleSaveQrCode = () => {
  qrcodeRef.value.save({
    success: () => {
      uni.showToast({
        icon: 'none',
        title: '保存成功'
      });
    }
  });
};

// 保存到相册 截图方案
const handleSaveAlbum = () => {
  let pages = getCurrentPages(); //获取当前页面信息
  let page = pages[pages.length - 1];
  let bitmap = null;
  let currentWebview = page.$getAppWebview();
  bitmap = new plus.nativeObj.Bitmap('amway_img');
  // 将webview内容绘制到Bitmap对象中
  currentWebview.draw(
    bitmap,
    function () {
      //这里我将文件名用四位随机数拼接了，不然会出现当前图片替换上一张图片只能保存一张图片的问题
      let rand = Math.floor(Math.random() * 10000);
      let saveUrl = '_doc/' + rand + 'a.jpg';
      bitmap.save(
        saveUrl,
        {},
        function (i) {
          uni.saveImageToPhotosAlbum({
            filePath: i.target,
            success: function () {
              // bitmap.clear(); //销毁Bitmap图片
              uni.showToast({
                title: '保存图片成功',
                mask: false,
                duration: 1500
              });
            }
          });
        },
        function (e) {}
      );
    },
    function (e) {},
    {
      check: true, // 设置为检测白屏
      clip: { top: '160', left: '0px', height: '93%', width: '100%' } // 设置截屏区域
    }
  );
};

onMounted(() => {
  inviteUrl.value = `${import.meta.env.VITE_APP_INVITE_URL}?inviteCode=${userInfo.inviteCode}`;
});

defineExpose({
  handleSaveQrCode
});
</script>

<style lang="scss" scoped>
.card {
  height: 790rpx;
  padding-top: 54rpx;
  background: url('https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/memberCenter5.png') no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
}
</style>
